<template>
  <div>
        <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      :limit="limit"
      :class="{disableded: fileComputed }"
      :on-remove="handleRemove"

      >

        <div slot="file" slot-scope="{file}" class="dx">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>

    </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>

  </div>
</template>

<script>
export default {
  props: {
    limit: {
      default: 2,
      type: Number
    }
  },
  computed: {
    // 设定一个计算属性 判断是否已经上传完够了
    fileComputed () {
      return this.fileList.length === this.limit
    }
  },
  data () {
    return {
      fileList: [], // 图片地址设置为数组

      dialogImageUrl: '',
      dialogVisible: false, // 控制显示弹层
      disabled: false
    }
  },
  methods: {
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove (file) {
      // console.log(file)
      console.log(this.fileList)
      this.fileList = this.fileList.filter(item => item.url !== file.url)
    }
  }
}
</script>

<style scoped>
/deep/.el-upload-list__item{
  width: 100px;
  height: 50px;
  border: none;
}
/deep/.el-upload{
  width: 100px;
  height: 50px;
}
/deep/.el-upload-list__item-actions{
  width: 100px;
  height: 50px;
}
.el-upload-list__item-thumbnail {
          /* 图片在方框内显示长边 */
          object-fit: contain;
          width: 100px;
  height: 50px;
        }
.disableded {
  display: none
}
</style>
